@import 'variables.less';

.dashboard-page{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% / 3);
    .module {
      height: calc(100% / 3 - 5px);
    }
    &:nth-of-type(1){
      width: calc(100% / 3 - 28px);
    }
    &:nth-of-type(2){
      margin-top: 0.45rem;
      .module{
        height: auto;
        min-height: 250px;
        position: relative;
        h3{
          text-align: center;
        }
        .legend{
          padding: 0 20px;
          position: absolute;
          top: 0;
          right: 0;
          li{
            vertical-align: middle;
            margin: 3px 0;
            float: left;
            span{
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: @green;
              box-shadow: 2px 2px 5px #0C0C0C;
              margin: 0 10px;
              border-radius: 50%;
            }
            &:nth-of-type(2){
              span{
                background-color: @gray;
              }
            }
          }
        }
        .line-row{
          display: flex;
          margin-top: 15px;
          .lineName{
            width: 80px;
            text-align: center;
          }
          ul{
            display: flex;
            flex-grow: 1;
            flex-wrap: wrap;
            margin-right: 10px;
            li{
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 33%;
              position: relative;
              margin-bottom: 10px;
              &:after{
                content: '';
                width: 100%;
                height: 0;
                border-top: 1px dashed cyan;
                position: absolute;
                top: 10px;
                left: 0;
                z-index: -1;
              }
              .devStatus{
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: @green;
                margin: 0 10px;
                border-radius: 50%;
                margin-bottom: 5px;
                box-shadow: 2px 2px 5px #0c0c0c;
              }
            }
          }

        }
      }
    }
    .alertList{
      li{
        vertical-align: middle;
        margin: 3px 0;
        span{
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: @red;
          margin: 0 10px;
        }
      }
    }
  }
}
